<template>
    <div class="groupChat">
        <img class="bg1" src="~static/img/bg/pic_yemain_dituyuansu03.png" alt="">
        <img class="bg2" src="~static/img/bg/pic_sy_banner_yuansu.png" alt="">
        <div class="container">
            <div class="groupBox">
                <div class="groupCube groupCube1">
                    <img src="~static/img/chat/pic_qunliao_neirong01.png" alt="">
                    <div class="groupText">
                        <img src="~static/img/chat/pic_qunliao_top.png" alt="">
                        <span>01</span>
                        <p class="title">工/具</p>
                        <p class="titleEn">tool</p>
                        <p>TA群聊能容纳2000人，频道容纳10万人。但这不是重点；重点是TA群聊是用户在TA生态圈中重要的纽带，通过方方面面为用户打造专属区块链的功能，提供与其它聊天工具差异化的产品，例如在群聊中可以发送红包、空投、利用代币投票、虚拟颁奖、P2P流通交易、C2C交易等。</p>
                    </div>
                </div>
                <div class="groupCube groupCube2">
                    <img src="~static/img/chat/pic_qunliao_neirong02.png" alt="">
                    <div class="groupText">
                        <img src="~static/img/chat/pic_qunliao_top.png" alt="">
                        <span>02</span>
                        <p class="title">互/动</p>
                        <p class="titleEn">interactive</p>
                        <p>群与媒体版块是高度结合的，使信息流动将更便利。在未来的9-10月，TA将逐步改造群功能，使群的互动能力进一步加强。进一步的策略我们暂时保密。TA相信我们一定能创造传奇。</p>
                    </div>
                </div>
                <div class="groupCube groupCube3">
                    <img src="~static/img/chat/pic_qunliao_neirong03.png" alt="">
                    <div class="groupText">
                        <img src="~static/img/chat/pic_qunliao_top.png" alt="">
                        <span>03</span>
                        <p class="title">去/中/心/化</p>
                        <p class="titleEn">decentralized</p>
                        <p>TA IM或群聊的去中心化与其它项目的实现方式将是完全不同的，我们将开发基于去中心化的人工智群聊，而不是简单的复刻同类的产品。在开发IODT协议时，将包含提供给IM的原生支持。至于其表现形式，请试目以待，黑科技即将到来。</p>
                    </div>
                </div>
                <div class="groupCube groupCube4">
                    <img class="videoImg" src="~static/img/chat/pic_qunliao_shipin.png" alt="">
                    <img class="videoIcon" src="~static/img/chat/play.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "groupChat"
    }
</script>

<style scoped>
    .groupChat{width:100%;background-color: #271553;position: relative;padding-bottom: 100px;}
    .groupChat .bg1{width:100%;position: absolute;bottom:0;left:0;}
    .groupChat .bg2{width:100%;position: absolute;top:0;left:0;}
    .groupBox{height:1380px;width:1120px;background-color: #fff;z-index:99;position: relative;margin:85px 25px;}
    .groupBox .groupCube{width:100%;height:25%;}
    .groupBox .groupCube .groupText{float: left;width:480px;height:100%;position: relative;}
    .groupText span{position:absolute;top:38px;left:170px;color:#c0c0c0;font-size: 75px;}
    .groupText p{width:100%;float: left;color: #7b7b7b;margin-left:40px;line-height: 25px;}
    .groupCube img{margin:40px 50px 0 25px;float: left;}
    .groupText .titleEn{color: #333;margin-bottom: 10px;font-size: 12px;width:170px;border-bottom:1px dotted #333;}
    .groupText .title{color: #333;font-size: 18px;margin-bottom: 0;line-height: 20px;}
    .groupBox .groupCube2{padding-right:120px;background-color: #e1e1e1;}
    .groupBox .groupCube2 .groupText{float: right;}
    .groupCube2 img{float: right;}
    .groupCube2 .groupText span{position:absolute;top:35px;left:375px;color:#c0c0c0;font-size: 75px;}
    .groupCube2 .groupText p{width:100%;float: right;color: #7b7b7b;line-height: 25px;}
    .groupCube2 .groupText .titleEn{color: #333;font-size: 12px;width:170px;border-bottom:1px dotted #333;float: right;position:relative;text-align: right;}
    .groupCube2  .groupText .title{color: #333;font-size: 18px;margin-bottom: 0;line-height: 20px;float: right;position:relative;left:440px;}
    .groupCube4 .videoImg{margin-top:0;float: initial;width: 110%;margin-left: -5%;position: relative;}
    .groupCube4 .videoIcon{width:50px;height:50px;position: absolute;bottom:10%;left:45%;}
</style>
